<template>
	<div>
		<el-form-item label="商家姓名" prop="merchant_name">
			<el-input id="merchant_name" v-model="form['merchant_name']" placeholder="请输入商家姓名" ></el-input>
		</el-form-item>
		<el-form-item label="民宿名称" prop="name_of_homestay">
			<el-input id="name_of_homestay" v-model="form['name_of_homestay']" placeholder="请输入民宿名称" ></el-input>
		</el-form-item>
		<el-form-item label="民宿电话" prop="homestay_phone_number">
			<el-input id="homestay_phone_number" v-model="form['homestay_phone_number']" placeholder="请输入民宿电话" type="tel"></el-input>
		</el-form-item>

		<!-- 身份证正面上传 -->
		<el-form-item label="身份证正面" prop="id_card_frontend">
			<div class="upload-container">
				<el-upload
            class="avatar-uploader" drag accept="image/gif, image/jpeg, image/png, image/jpg"
            action="" :http-request="uploadimgFrontend" :show-file-list="false">
					<img v-if="form['id_card_frontend']" :src="$fullUrl(form['id_card_frontend'])" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</div>
		</el-form-item>

		<!-- 身份证反面上传 -->
		<el-form-item label="身份证反面" prop="id_card_backend">
			<div class="upload-container">
				<el-upload
            class="avatar-uploader" drag accept="image/gif, image/jpeg, image/png, image/jpg"
            action="" :http-request="uploadimgBackend" :show-file-list="false">
					<img v-if="form['id_card_backend']" :src="$fullUrl(form['id_card_backend'])" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</div>
		</el-form-item>

		<!-- 卫生许可证上传 -->
		<el-form-item label="卫生许可证" prop="permit">
			<div class="upload-container">
				<el-upload
            class="avatar-uploader" drag accept="image/gif, image/jpeg, image/png, image/jpg"
            action="" :http-request="uploadimgPermit" :show-file-list="false">
					<img v-if="form['permit']" :src="$fullUrl(form['permit'])" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</div>
		</el-form-item>
	</div>
</template>

<script>
export default {
	props: {
		form: {
			type: Object,
			default: function () {
				return {
					"merchant_name": "",
					"name_of_homestay": "",
					"homestay_phone_number": "",
					"id_card_frontend": "", // 新增字段
					"id_card_backend": "", // 新增字段
					"permit": "", // 新增字段
				};
			},
		},
	},
	data() {
		return {
			field: "merchant_users_id",
			url_add: "~/api/merchant_users/add?",
			url_set: "~/api/merchant_users/set?",
			url_upload: "http://localhost:5000/api/merchant_users/upload?",

			rules: {
				"merchant_name": [{ required: true, message: "商家姓名不能为空" }],
				"name_of_homestay": [{ required: true, message: "民宿名称不能为空" }],
				"homestay_phone_number": [
					{ validator: this.$is_phone, trigger: "blur" },
					{ required: true, message: "民宿电话不能为空" },
				],
				"id_card_frontend": [{ required: true, message: "身份证正面不能为空" }], // 新增校验规则
				"id_card_backend": [{ required: true, message: "身份证反面不能为空" }], // 新增校验规则
				"permit": [{ required: true, message: "卫生许可证不能为空" }], // 新增校验规则
			},
		};
	},
	methods: {
		// 上传文件方法
		uploadFile(file, key) {
			var _this = this;
			var form = new FormData(); // FormData 对象
			form.append('file', file); // 文件对象
			this.$upload(this.url_upload, form, function(json) {
				if (json.result) {
					// 确保图片路径正确赋值到 form 对象中
					_this.form[key] = json.result.url;
					// 强制刷新组件以确保图片能够立即显示
					_this.$forceUpdate();
				} else {
					_this.$toast('上传失败！');
				}
			});
		},

		// 身份证正面上传
		uploadimgFrontend(param) {
			this.uploadFile(param.file, "id_card_frontend");
		},

		// 身份证反面上传
		uploadimgBackend(param) {
			this.uploadFile(param.file, "id_card_backend");
		},

		// 卫生许可证上传
		uploadimgPermit(param) {
			this.uploadFile(param.file, "permit");
		},
	},
	created() {
		// 初始化逻辑
		console.log("form_merchant_users.vue 初始化完成");
	}
}
</script>

<style scoped>
.upload-container {
	position: relative;
	display: inline-block;
}

.avatar-uploader {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	width: 178px;  /* 确保容器宽度与图片一致 */
	height: 178px; /* 确保容器高度与图片一致 */
	display: inline-block; /* 修改为行内块级元素 */
}

.avatar-uploader:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
	display: block; /* 确保图标完全填充容器 */
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
	object-fit: cover; /* 确保图片按比例缩放并覆盖整个容器 */
}
</style>
